<template>
  <div class="blogClassify_box">
    <div class="row">
      <!-- 搜索框 -->
      <el-form :model="searchForm" style="position: fixed;padding-left: 1%;">
        <el-select v-model="searchForm.type" placeholder="请选择类别" style="width: 12%;">
          <el-option
            v-for="(item, index) in classList"
            :key="index"
            :label="item"
            :value="index">
          </el-option>
        </el-select>

        <el-select v-model="searchForm.sort" placeholder="请选择排序方式" style="width: 14%;margin-left: 1%;">
          <el-option
            v-for="(item, index) in sortList"
            :key="index"
            :label="item"
            :value="index">
          </el-option>
        </el-select>

        <el-input placeholder="标题/内容" v-model="searchForm.keyword" clearable style="width: 16%;margin-left: 1%;"></el-input>

        <el-date-picker style="margin-left: 1%;"
          v-model="searchForm.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm"
        >
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" style="margin-left: 1%;margin-top: 1%;margin-bottom: 1%;" @click="searchOrder">搜索</el-button>
      </el-form>

      <!-- 分类列表 -->
      <div class="col-md-2" style="padding: 0;margin-top: 8%;">
        <div class="classify_list">
          <ul>
            <li :class="[item === queryInfo.categories ? 'active_li' : '']" @click="changeCate(item, index-1)" v-for="(item, index) in classList" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="col-md-10" style="margin-top: 8%;">
        <div class="container">
          <div style="overflow-y: scroll;height: 100%;" >
            <div class="card_list" v-for="list in pressing" :key="list.id">
              <el-card>
                <h5>
                  <router-link class="card_title" :to="{ name: 'OrderDetail', params: { oid: list.id } }">
                    <span>{{ list.title }}</span>
                  </router-link>
                </h5>
                <div class="card_detail">
                  <div class="rol">
                    <i class="el-icon-position"></i>
                    <span>QQ</span>
                    <span>{{ list.qq }}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-phone-outline"></i>
                    <span>电话</span>
                    <span>{{ list.phone }}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-location-outline"></i>
                    <span>地址</span>
                    <span>{{ list.address }}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-coin"></i>
                    <span>酬劳</span>
                    <span>¥ {{ list.price }}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-time"></i>
                    <span>时间</span>
                    <span>{{ list.time }}</span>
                  </div>
                </div>
                <div class="card_desc">
                  <p>{{ list.content }}</p>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <el-tag type="success" v-if="list.classify === 0">楼栋服务</el-tag>
                  <el-tag type="success" v-if="list.classify === 1">代拿代买</el-tag>
                  <el-tag type="success" v-if="list.classify === 2">其他互助</el-tag>
                  <el-popconfirm title="是否确认接单？" @onConfirm="toAcceptOrder(list.id, list.uid)">
                    <el-button type="primary" plain size="small" slot="reference">确认接单</el-button>
                  </el-popconfirm>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <div class="mpage">
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.cur"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="queryInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userid: 0,
      classify: 0,
      // 搜索
      searchForm: {
        type: 0,
        time: '',
        sort: 1,
        keyword: '',
      },
      sortList: [
        '时间降序',
        '时间升序',
        '酬劳降序',
        '酬劳升序'
      ],
      // 分类查询参数
      queryInfo: {
        cur: 1, // 当前页
        size: 5, // 条目
        categories: '所有分类' // 分类名
      },
      // 文章列表
      pressing: [],
      total: 0,
      // 分类名列表
      classList: [
        '所有分类',
        '楼栋服务',
        '代拿代买',
        '其他互助'
      ]
    }
  },
  methods: {
    // 根据条件查询
    async toSearch () {
      let startTime = this.getFormatDate()
      let endTime = "2999-12-31 23:59"
      if (this.searchForm.time !== '' && this.searchForm.time !== null) {
        startTime = this.searchForm.time[0]
        endTime = this.searchForm.time[1]
      }
      const { data: res } = await this.$http.get('/help/nav/search', {
        params: {
          classify: this.searchForm.type - 1,
          sort: this.searchForm.sort,
          startTime: startTime,
          endTime: endTime,
          keyword: this.searchForm.keyword,
          current: this.queryInfo.cur,
          size: this.queryInfo.size
        }},{
        emulateJSON:true
      })
      if (res.success !== undefined) {
        window.location.href = "http://malloc.press:9000/user/nav/toLogin"
      }
      // 文章列表赋值
      this.pressing = res.pressing_all.records
      this.total = res.pressing_all.total
    },
    // 改变分类名
    changeCate (newCate, id) {
      this.queryInfo.categories = newCate
      this.classify = id
      this.searchForm.type = id + 1
      this.queryInfo.cur = 1
      this.toSearch()
    },
    // 点击查询按钮
    searchOrder () {
      this.queryInfo.cur = 1
      this.toSearch()
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.size = newSize
      this.toSearch()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
      this.queryInfo.cur = newCur
      this.toSearch()
    },
    // 确认订单
    toAcceptOrder (id, uid) {
      const that = this;
      if (uid == this.userid) {
        that.$message({
          message: '您不能接自己的订单！',
          type: 'warning'
        });
        return
      }
      that.$http.get('/help/nav/acceptOrder',{params:{uid: localStorage.getItem("userId"),oid: id}},{
        emulateJSON:true
      }).then(res => {
        if (res.data.success !== undefined) {
          window.location.href = "http://malloc.press:9000/user/nav/toLogin"
        }
        that.$message({
          message: '请在三天内联系发布者确认，若三天后发布者未确认视为未完成订单！',
          type: 'warning'
        });
        that.toSearch();
      });
    },
    //获取当前时间
    getFormatDate () {
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
      let date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      let hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours();
      let minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
      return year + "-" + month + "-" + date + " " + hour + ":" + minute;
    },
  },
  created () {
    document.body.style.overflow = "hidden";
    // 可以获取路由路径中的路径参数 classify
    this.classify = this.$route.params.classify
    // this.queryInfo.categories = '所有分类'
    this.queryInfo.categories = this.classList[this.classify - 0 + 1]
    this.searchForm.type = this.classify - 0 + 1
    this.userid = localStorage.getItem("userId")
    this.toSearch()
  },
  destroyed() {
    document.body.style.overflow = "visible";
  }
}
</script>

<style lang="less" scoped>
.blogClassify_box {
  height: 80%;
  min-height: 540px;
  padding: 1% 5%;
  margin-top: -3%;
  div {
    // border:1px solid green;
  }
  .classify_list {
    position: fixed;
    // border: 1px solid black;
    width: 160px;
    // height: 50%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2);
    padding: 2% 0;
    ul {
      padding: 0 !important;
      list-style: none;
      li {
        cursor: pointer;
        padding: 5% 2%;
        padding: 10px;
        text-align: center;
        // border:1px solid red;
        transition: all 0.8s;
        color: rgb(0, 174, 255);
      }
      li:hover {
        background: rgb(100, 230, 240);
        margin: 0 -5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        color: #fff;
      }
      .active_li {
        background: rgb(100, 230, 240);
        margin: 0 -5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        color: #fff;
      }
    }
  }

  .card_list {
    padding-right: 1%;
    .el-card {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      min-height: 200px;
      margin: 0 !important;
      margin-bottom: 5% !important;

      .card_title {
        a:hover {
          text-decoration: none;
        }
        span {
          color: #666;
          font-size: 1.6rem;
        }
        span:hover {
          color: rgb(89, 140, 250);
        }
      }
      .card_detail {
        width: 100%;
        font-size: 12px;
        color: #999;
        padding: 10px 0;
        .rol {
          float: left;
          margin-right: 8px;
          i {
            margin-right: 4px;
          }
          span {
            margin-right: 5px;
          }
        }
      }
      .card_desc {
        width: 100%;
        color: #555;
        font-size: 16px;
        line-height: 2;
        padding-top: 2%;

        p {
          width: 85%;
          overflow: hidden;
          display: -webkit-box; //将元素设为盒子伸缩模型显示
          -webkit-box-orient: vertical; //伸缩方向设为垂直方向
          -webkit-line-clamp: 2; //超出3行隐藏，并显示省略号
        }
      }
    }
  }

  .tip {
    height: 50px;
    text-align: center;
  }
}

@media only screen and (max-width: 1000px) {
  .col-md-2 {
    .classify_list {
      z-index: 9;
      display: flex;
      align-items: center;
      li {
        float: left;
      }
    }
  }
}

body.modal-open {
  padding-right: 0 !important;
  overflow-y: scroll;
}

.container{
  position: fixed;
  height: 65%;
  width: 42%;
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #c0c8db;
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 5px
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #c0c8db
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 6px;
    background-color: #F3F3F6;
  }
  ::-webkit-scrollbar-track-piece {
    background: 0 0
  }

  ::-webkit-scrollbar-track:hover {
    background: #F3F3F6
  }
}

.mpage {
  position: fixed;
  bottom: 12%;
}
</style>

<style lang="less">
.footer {
  position: fixed !important;
}
.el-date-editor .el-range__close-icon {
  margin-left: 19px!important;
}
</style>
